@import "./variable.scss";

.scrollbar-style {
    overflow-y: auto;
    &::-webkit-scrollbar-thumb {
        background-color: rgba(#1F2933, 0.0);
        border-radius: 6px;
        transition: background-color 0.6s;
    }

    &::-webkit-scrollbar {
        width: 6px;
        height: 10px;
        background-color: transparent;
        cursor: pointer;
    }
    &:hover::-webkit-scrollbar-thumb {
        background-color: rgba(#1F2933, 0.2);
    }
}

.border-shaw {
    background-color: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(32, 30, 83, 0.2);
    border-radius: 5px;
}

.text-over {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
flex布局
 */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-self-center {
    display: flex;
    align-self: center;
}

.flex-items-center {
    display: flex;
    align-items: center;
}

.flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

$align-content:(center:center,
    between:space-between,
    around:space-around,
    end:flex-end);

@each $type,
$value in $align-content {
    .flex-align-#{$type} {
        display: flex;
        align-content: $value;
        flex-wrap: wrap;
    }
}

$justify-content:(center:center,
    between:space-between,
    around:space-around,
    end:flex-end,
    start:flex-start);

@each $type,
$value in $justify-content {
    .flex-justify-#{$type} {
        display: flex;
        justify-content: $value;
        flex-wrap: wrap;
    }
}

/*fade-transform*/
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all .5s;
}

.fade-transform-enter {
    opacity: 0;
    transform: translateX(-60px);
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(60px);
}

/* button particle */
.button-particle {
    position: relative;
    &::before {
        position: absolute;
        z-index: 2001;
        content: '';
        left: -2em;
        right: -2em;
        top: -2em;
        bottom: -2em;
        pointer-events: none;
        transition: ease-in-out .5s;
        background-repeat: no-repeat;
        $particle-color: rgba($theme-color, 0.6);
        background-image: radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%),
            radial-gradient(circle, $particle-color 20%, transparent 20%);
        background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%,
            15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%,
            83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%;
        animation: bubbles ease-in-out .75s forwards;
    }

    &:active {
        transform: scale(0.99);
    }

    &:active::before {
        animation: none;
        background-size: 0;
    }

    @keyframes bubbles {
        0% {
            background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%,
                83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%;
        }

        50% {
            background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%, 75% 0%, 95% -2%, 0% 80%,
                95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%, 68% 96%, 95% 100%;
        }

        100% {
            background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%, 100% -2%, -5% 80%,
                100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%, 100% 100%;
            background-size: 0% 0%;
        }
    }
}